<script setup>
import { onMounted, onUnmounted, ref, watch } from "vue";

//example components
import NavbarDefault from "@/examples/navbars/NavbarDefault.vue";
import DefaultFooter from "@/examples/footers/FooterDefault.vue";
import Header from "@/examples/Header.vue";

//Vue Material Kit 2 components

import PresentationExample from "./Sections/PresentationExample.vue";
import data from "./Sections/Data/designBlocksData";

//images
import vueMkHeader from "@/assets/img/LOGO.png";

// nav-pill
import setNavPills from "@/assets/js/nav-pills.js";
import MaterialButton from "@/components/MaterialButton.vue";
import SafetyTraining from "./components/SafetyTraining.vue";
import InspectionMaintenance from "./components/InspectionMaintenance.vue";
import { useRouter } from "vue-router";

let buttonType = ref(1);
let type = ref(1);
let curType = ref(1);
//hooks
const body = document.getElementsByTagName("body")[0];
const router = useRouter();
// 监听当前路由的name变化
watch(
  () => router.currentRoute.value.query.type,
  (newRouterName) => {
    type.value = newRouterName;
  },
  { immediate: true }
);
const go = (type) => {
  router.push(`/supportServices?type=${type}`);
};

const navList = [
  {
    name: "Safety-Training",
    value: 1,
  },
  {
    name: "Inspection-Maintenance",
    value: 2,
  },
  // {
  //     name: "Sales Network",
  // },
  // {
  //     name: "Solution",
  // },
];
onMounted(() => {
  body.classList.add("presentation-page");
  body.classList.add("bg-gray-200");
  setNavPills();
});
onUnmounted(() => {
  body.classList.remove("presentation-page");
  body.classList.remove("bg-gray-200");
});
</script>

<template>
  <div class="container position-sticky z-index-sticky top-0">
    <div class="row">
      <div class="col-12">
        <NavbarDefault :sticky="true" />
      </div>
    </div>
  </div>
  <Header>
    <div
      class="page-header header-height"
      :style="`background-image: url(${vueMkHeader})`"
      loading="lazy"
    ></div>
  </Header>

  <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
    <section class="pt-1 pb-5">
      <div class="container">
        <div class="row">
          <div class="col-lg-10 mx-auto">
            <div class="nav-wrapper position-relative end-0">
              <ul class="nav nav-pills nav-fill p-1" role="tablist">
                <li
                  class="nav-item"
                  v-for="(item, index) in navList"
                  :key="index"
                >
                  <a
                    :class="`nav-link mb-0 px-0 py-1 ${
                      item.value == type ? 'active' : ''
                    }`"
                    data-bs-toggle="tab"
                    href="#profile-tabs-simple"
                    role="tab"
                    aria-controls="profile"
                    :aria-selected="`${item.value == type ? 'true' : 'false'}`"
                    @click="go(item.value)"
                  >
                    {{ item.name }}
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
    <SafetyTraining v-if="type == 1" />
    <InspectionMaintenance v-else-if="type == 2" />
  </div>
  <DefaultFooter />
</template>
<style scoped>
.header-height {
  min-height: 75vh !important;
}
@media (max-width: 1000px) {
  .header-height {
    min-height: 40vh !important;
  }
}
</style>
